import React, { useState, useEffect, useCallback, useRef } from 'react';
import Son from './components/son';
import Ref from './components/ref';

const content1 = '1、测试useEffect的事件销毁，窗口大小改变，触发resize事件，通过useEffect方法（return 一个函数相当于事件销毁），解绑resize事件'
const content2 = '2、子组件用了memo方法，只有props变化时，才重新渲染'

function UseEffect() {

    const [count, setCount] = useState(0);
    const [a, setA] = useState(0);
    const refTest = useRef('00');
    const refComponent = useRef();

    const resize = () => {
        console.log('窗口改变啦');
    }
    // 相当于componentDidMount
    useEffect(() => {
        // window.addEventListener('resize', resize)
        console.log('1111')
        return () => {
            window.removeEventListener('resize', resize);
        }
    }, [])

    const callback = useCallback(() => {
        console.log('callback')
    }, [a])

    function add() {
        setCount(count + 1)
    }

    function changeRef() {
        // setA();
        refTest.current = 'xixix';
        refComponent.current.checkLog();
        console.log('ssss', refComponent.current)
    }

    const onCreate = (ref) => {
        refComponent.current = ref;
    }

    return (
        <>
            <h2>
                useEffect测试
            </h2>
            父组件：计数：{count}
            <button onClick={add}>加一</button> <br />
            <Son count={count} callback={callback} />
            <hr />
            <div>{content1}</div>
            <div>{content2}</div>

            <h2>
                useRef测试
            </h2>
            <button onClick={changeRef}>
                改变ref
            </button>
            <br />
            <Ref
                ref={refComponent}
                onCreate={onCreate}
                refTest={refTest.current}
            />
        </>
    )
}
export default UseEffect